import { reqUserList, reqLogout, reqDeleteUser } from '../../api'
import render from './index.art'
import { storageUtils } from '../../utils/storageUtils'

// 获取指定页码的用户列表
async function getUsers(page) {
    // 每页数量
    const limit = 5
    // 请求获取分页数据
    const result = await reqUserList(page, limit)
    // 取出总页数和分页数据
    let { total, users } = result.data
    // 得到登陆用户的用户名
    const { username } = storageUtils.getUser()
    // 计算页数
    const pages = Math.ceil(total / limit)
    // 渲染art-template模板和插入页面
    document.getElementById('app').innerHTML = render({ users, total, page, pages, username })
    // 处理退出事件
    handleLogout()
    // 处理删除事件
    handleDelete(page, limit, total, pages)
}
window.getUsers = getUsers
getUsers(1).then(() => {})

// 退出登录
function handleLogout() {
    // 绑定退出事件
    document.getElementById('logout').addEventListener('click', async function () {
        if (window.confirm('确定退出吗？')) {
            // 请求退出登录
            await reqLogout()
        }
        // 清除token和user
        storageUtils.removeToken()
        storageUtils.removeUser()
        // 跳转到登录页面
        window.location.href = '/login.html'
    })
}

// 删除用户
function handleDelete(page, limit, total, pages) {
    // 获取所有的删除按钮
    const deleteBtns = document.getElementsByName('delete')
    // 绑定删除事件
    deleteBtns.forEach((btn) => {
        btn.addEventListener('click', async function () {
            // 获取当前用户id
            const id = this.getAttribute('data-id')
            const username = this.getAttribute('data-username')
            if (window.confirm(`确定删除${username}吗？`)) {
                // 当删除当前页最后一个用户时，跳转到上一页
                if (page === pages && total % limit === 1) {
                    // 请求删除用户
                    await reqDeleteUser(id)
                    await getUsers(page - 1)
                } else {
                    // 请求删除用户
                    await reqDeleteUser(id)
                    await getUsers(page)
                }
            }
        })
    })
}
